<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <!-- StartDate  EndDate -->
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请输入关键字"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="考勤日期" prop="dateRange">
          <el-date-picker
            v-model="queryParams.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :disabled-date="disabledDate"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            clearable
          />
        </el-form-item>
        <el-form-item label="进出标识" prop="entryExitMark">
          <el-select v-model="queryParams.entryExitMark" placeholder="请选择进出标识" style="width: 200px" clearable>
            <el-option
              v-for="item in EntryExitMark"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="currentSystem !== 'SysUser'" label="班组" prop="groupId">
          <el-select v-model="queryParams.groupId" placeholder="请选择班组" style="width: 200px" clearable>
            <el-option v-for="item in teamList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <i-ep-search />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <i-ep-refresh />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never">
      <!-- <template #header v-if="currentSystem === 'admin'">
				<div class="flex justify-between">
					<div>
						<el-button type="success" @click="openDialog()"
											 v-hasPerm="['sys:checkin:add']"
						>
							<i-ep-plus/>
							新增
						</el-button
						>
					</div>
				</div>
			</template> -->
      <el-form-item>
        <el-button type="primary" :loading="download_loading" @click="download()"><i-ep-download />导出</el-button>
      </el-form-item>
      <el-table v-loading="loading" :data="tableList" highlight-current-row border style="height: 400px" size="small">
        <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
        <el-table-column key="personName" label="姓名" width="90px" align="center" prop="personName">
          <template #default="scope">
            <el-link type="primary" @click="openDetail(scope.row, scope.row.month)">{{ scope.row.personName }}</el-link>
          </template>
        </el-table-column>
        <el-table-column key="corpName" label="所属公司" align="center" min-width="" prop="corpName"> </el-table-column>
        <el-table-column key="corpTypeName" label="公司类型" align="center" min-width="100" prop="corpTypeName">
        </el-table-column>
        <el-table-column key="groupName" label="班组" align="center" min-width="100" prop="groupName">
        </el-table-column>
        <el-table-column key="workTypeName" label="工种" align="center" min-width="100" prop="workTypeName">
        </el-table-column>
        <el-table-column key="statusName" label="考勤状态" min-width="80px" align="center" prop="statusName">
          <template #default="scope">
            <el-tag :type="scope.row.statusName === '无效' ? 'danger' : ''">{{ scope.row.statusName }} </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          key="entryExitMarkName"
          label="进出标识"
          min-width="80px"
          align="center"
          prop="entryExitMarkName"
        >
          <template #default="scope">
            <el-tag :type="scope.row.entryExitMarkName === '出场' ? 'info' : ''"
              >{{ scope.row.entryExitMarkName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column key="checkinDate" label="考勤日期" min-width="100" align="center" prop="checkinDate" />
        <el-table-column key="dataSourcesName" label="考勤来源" min-width="77" align="center" prop="dataSourcesName">
          <template #default="scope">
            {{ scope.row.dataSourcesName }}
          </template>
        </el-table-column>
            <el-table-column key="checkinDate" label="设备编号" min-width="100" align="center" prop="equipmentCode" />
        <el-table-column key="checkinDate" label="设备厂家" min-width="100" align="center" prop="deviceType" />
        <el-table-column key="startDate" label="开始用工日期" min-width="110px" align="center" prop="startDate" />
        <el-table-column key="endDate" label="结束用工日期" min-width="110px" align="center" prop="endDate" />
        <el-table-column key="createTime" label="创建时间" min-width="150" align="center" prop="createTime" />
        <el-table-column label="操作" fixed="right" width="120">
          <template #default="scope">
            <!-- <el-link type="primary" @click="showAvatar(scope.row.id,scope.row.month)">{{ scope.row.personName }}</el-link> -->
            <el-button type="primary" link size="small" @click="showAvatar(scope.row.id, scope.row.month)">
              <i-ep-grid />
              查看图片
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageIndex"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
      <!-- 新增/修改弹窗 -->
      <el-image-viewer v-if="isAvatar" :url-list="avatarImage" fit="contain" @close="viewerClose"></el-image-viewer>
    </el-card>

    <!-- <DetailDescription
			v-if="dialogDetail.visible"
			:dialog-add-or-edit="dialogDetail"
			@sendClose="sendClose"
		></DetailDescription> -->

    <!-- 班组成员详情弹窗 -->
    <memberdetail
      v-if="dialogMemberDetail.visible"
      :dialog-add-or-edit="dialogMemberDetail"
      :is-manager="dialogMemberDetail.isManager"
      @send-close="sendClose"
    ></memberdetail>
  </div>
</template>

<script lang="ts" setup>
/**引入文件**/
import { computed } from "vue";
import { useScreen } from "@/store/modules/screen";
import { getDicts } from "@/store/modules/dict";
import moment from "moment";
import memberdetail from "@/views/commonpage/worker/workerinfo/addForm.vue";

import { getImage_checkindetail } from "@/api/system/face/index";

import { AttendanceListForm, CheckInQueryForm } from "@/api/checkin/types";
import { getAttendanceList, getProjectTeamPulldownList, exportDetailInfo } from "@/api/checkin/index";
import { downloadFile } from "@/utils";

/**声明变量**/

const props = defineProps({
  id: {
    type: Number,
    default: 0,
  },
});
const { id } = toRefs(props);

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenHeight = ref(100);
const currentSystem = ref(localStorage.getItem("usertypeName"));
const EntryExitMark = getDicts("entryExitMark"); // 进出标识

const total = ref(0);
const loading = ref(false);
const queryFormRef = ref(ElForm);
const teamList = ref();
const tableList = ref<AttendanceListForm[]>();
const queryParams = reactive<CheckInQueryForm>({
  pageIndex: 1,
  pageSize: 20,
  dateRange: [moment(moment().format("yyyy-MM")).format("yyyy-MM-DD"), moment().format("yyyy-MM-DD")],
});
const dialogMemberDetail = reactive({
  visible: false,
  title: "班组成员",
  isManager: false,
  type: 3,
  id: 0,
});

const avatarImage = ref<string[]>([]);
const isAvatar = ref(false);
const userType = localStorage.getItem("usertypeName");
const download_loading = ref(false);

function download() {
  download_loading.value = true;
  exportDetailInfo(queryParams).then((response: any) => {
    if (!response.headers["content-disposition"]) {
      const decoder = new TextDecoder("utf-8");
      const resp = decoder.decode(response.data);
      let objResp = JSON.parse(resp);
      ElMessage.error(objResp.msg);
      download_loading.value = false;
      return;
    }

    downloadFile(response);
    download_loading.value = false;
  });
}

/**声明函数**/
// 初始化窗体
function initScreen() {
  if (mobile.value === "mobile") {
    screenHeight.value = screenStore.screenHeight;
  } else {
  }
}
function showAvatar(id: string, month: string) {
  avatarImage.value = [];
  isAvatar.value = true;
  getImage_checkindetail(id, month).then((res) => {
    avatarImage.value.push(res.data);
  });
}

function viewerClose() {
  isAvatar.value = false;
}

/* 列表查询 */
async function handleQuery() {
  loading.value = true;
  if (queryParams.dateRange && queryParams.dateRange.length > 0) {
    queryParams.startDate = queryParams.dateRange[0];
    queryParams.endDate = queryParams.dateRange[1];
  } else {
    queryParams.startDate = "";
    queryParams.endDate = "";
  }
  queryParams.projectId = id.value;
  let list = await getAttendanceList(queryParams);
  if (list.type === 0) {
    if (list.success) {
      tableList.value = list.data.list;
      total.value = list.data.total;
      queryParams.pageIndex = list.data.pageNum;
      queryParams.pageSize = list.data.pageSize;
    } else {
      ElMessage.error(list.msg);
    }
  } else {
    ElMessage.error(list.msg);
  }
  loading.value = false;
}
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageIndex = 1;
  queryParams.pageSize = 20;

  queryParams.startDate = moment(moment().format("yyyy-MM")).format("yyyy-MM-DD");
  queryParams.endDate = moment().format("yyyy-MM-DD");
  handleQuery();
}

/**
 * 项目班组下拉
 */
function handleProjectTeam() {
  if (currentSystem.value !== "SysUser") {
    getProjectTeamPulldownList().then((res) => {
      if (res.type === 0) {
        if (res.success) {
          teamList.value = res.data;
        } else {
        }
      } else {
      }
    });
  }
}

//生命周期事件

onMounted(async () => {
  initScreen();
  handleProjectTeam();
  handleQuery();
});

function openDetail(form: any, detail: any) {
  dialogMemberDetail.visible = true;
  dialogMemberDetail.id = form.memberId;
  dialogMemberDetail.isManager = form.isManager;
  dialogMemberDetail.title = "人员详情";
}

/* 关闭弹窗并刷新列表 */
function sendClose(query: any) {
  dialogMemberDetail.visible = false;
  if (query) {
    handleQuery();
  }
}
</script>
<style lang="less" scoped></style>
